<!DOCTYPE html>
<html>
<head>
  <title>Contact Manager</title>
  <script>
    async function addContact() {
      const name = document.getElementById("name").value;
      const address = document.getElementById("address").value;
      const phone = document.getElementById("phone").value;

      const response = await fetch('/add', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, address, phone }),
      });

      const result = await response.text();
      alert(result);
    }

    async function viewContacts() {
      const response = await fetch('/view');
      const contacts = await response.text();
      alert(contacts);
    }
  </script>
</head>
<body>
<h1>Contact Manager</h1>
<input type="text" id="name" placeholder="Name">
<input type="text" id="address" placeholder="Address">
<input type="text" id="phone" placeholder="Phone">
<button onclick="addContact()">Add Contact</button>
<button onclick="viewContacts()">View Contacts</button>
</body>
</html>